<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <script src="/layui/layui.js"></script>
</head>
<body>

<img src="http://192.168.82.168/group1/M00/00/00/wKhSqGBJkFuAPWKcAAA_rYr-H7o907.jpg">

<form class="layui-form layui-form-pane" id="bookForm"  method="post">
    <!-- layui-form-item 一个输入项-->
    <div class="layui-form-item">
        <label class="layui-form-label">name</label>
        <!-- layui-input-block 输入框会占满除文字外的整行 -->
        <div class="layui-input-block">
            <input id="birth" type="text" placeholder="请输入名称" name="name" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>图片
            </button>
            <input type="hidden" name="images" id="images">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单行选择框</label>
        <div class="layui-input-block">
            <select name="tId" lay-filter="aihao">
                <option value="1" selected="">编程</option>
                <option value="2">小说</option>
                <option value="3">杂志</option>
                <option value="4">科幻</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
                <input type="text" name="author" placeholder="请输入作者" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        

        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"
                        lay-filter="doSubmit" lay-submit="">提交
                </button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置
                </button>
            </div>
        </div>
</form>
<script>
    //upload  文件上传的组件
    layui.use(['upload','layer','form','jquery'], function(){
        var upload = layui.upload;
        var form   = layui.form;
        var $  = layui.$;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/uploadFile' //上传接口
            ,accept:'images' // file代表所有文件，默认是images代表图片
            ,size:10000 // 文件最大100kb
            ,done: function(res){
                console.log(res);
                //{"msg":"上传成功",
                // "path":"http://192.168.82.168/group1/M00/00/00/wKhSqGBJityAKL0_AAA_0WgqiXw249.gif","code":0}

                $("#images").val(res.path);//jquery

                //上传完毕回调
                layui.layer.msg("ok");
            }
            ,error: function(){
                //请求异常回调
                layui.layer.msg("error");
            }
        });

        //监听提交
        form.on('submit(doSubmit)', function(data){
            //得到表单所有数据
            var data = $("#bookForm").serialize();
            console.log(data);
            $.ajax({
                url:"/addBook",//
                type:"post",
                dataType:"json",
                data:data,
                success:function(r){
                    layui.layer.alert(r.msg);
                }

            });

        });

    });
</script>

</body>
</html>